<template>
  <div class="visitor-status">
    <el-container class="layout-container">
      <!-- 头部 -->
      <el-header class="app-header">
        <div class="header-content">
          <h1 class="header-title">通行码状态</h1>
          <p class="header-subtitle">查看您的通行码状态和有效期</p>
        </div>
      </el-header>

      <!-- 主体内容 -->
      <el-main class="app-main">
        <div class="main-container">
          <!-- 通行码卡片 -->
          <el-card class="status-card" shadow="hover">
            <template #header>
              <div class="card-header">
                <span class="card-title">通行码状态</span>
                <el-button type="primary" text @click="refreshStatus">
                  <el-icon><Refresh /></el-icon>
                  刷新状态
                </el-button>
              </div>
            </template>

            <div class="status-content">
              <!-- 通行码显示 -->
              <div class="code-display">
                <div
                  class="code-circle"
                  :class="getCodeClass(status)"
                  @click="toggleCode"
                >
                  <div class="code-text">
                    {{ getCodeText(status) }}
                  </div>
                  <div class="code-label">
                    {{ getCodeLabel(status) }}
                  </div>
                </div>
              </div>

              <!-- 状态信息 -->
              <div class="status-info">
                <el-descriptions :column="1" border>
                  <el-descriptions-item label="姓名">
                    {{ visitorInfo.XM || "--" }}
                  </el-descriptions-item>
                  <el-descriptions-item label="公司名称">
                    {{ visitorInfo.LFRGSMC || "--" }}
                  </el-descriptions-item>
                  <el-descriptions-item label="联系电话">
                    {{ visitorInfo.LXDH || "--" }}
                  </el-descriptions-item>
                  <el-descriptions-item label="来访人数">
                    {{ visitorInfo.RS || "--" }}
                  </el-descriptions-item>
                  <el-descriptions-item label="进场事由">
                    {{ visitorInfo.JCSY || "--" }}
                  </el-descriptions-item>
                  <el-descriptions-item label="通行码状态">
                    <el-tag :type="getStatusTagType(status)">
                      {{ getStatusText(status) }}
                    </el-tag>
                  </el-descriptions-item>
                  <el-descriptions-item label="有效期">
                    {{ getValidityPeriod() }}
                  </el-descriptions-item>
                  <el-descriptions-item
                    v-if="status === 'rejected'"
                    label="驳回原因"
                  >
                    <span class="reject-reason">{{
                      visitorInfo.BHYY || "--"
                    }}</span>
                  </el-descriptions-item>
                </el-descriptions>
              </div>

              <!-- 操作按钮 -->
              <div class="action-buttons">
                <el-button
                  v-if="status === 'rejected'"
                  type="primary"
                  size="large"
                  @click="goToRegister"
                >
                  <el-icon><EditPen /></el-icon>
                  重新登记
                </el-button>

                <el-button type="default" size="large" @click="goBack">
                  <el-icon><ArrowLeft /></el-icon>
                  返回首页
                </el-button>
              </div>
            </div>
          </el-card>

          <!-- 状态说明 -->
          <el-card class="info-card" shadow="hover">
            <template #header>
              <div class="card-header">
                <span class="card-title">通行码说明</span>
              </div>
            </template>
            <div class="info-content">
              <el-row :gutter="20">
                <el-col :xs="24" :sm="8">
                  <div class="info-item">
                    <div class="info-icon green">
                      <el-icon><Check /></el-icon>
                    </div>
                    <h4>绿色通行码</h4>
                    <p>审核通过，可正常通行</p>
                  </div>
                </el-col>
                <el-col :xs="24" :sm="8">
                  <div class="info-item">
                    <div class="info-icon orange">
                      <el-icon><Clock /></el-icon>
                    </div>
                    <h4>橙色通行码</h4>
                    <p>待审核状态，施工人员需要等待审核</p>
                  </div>
                </el-col>
                <el-col :xs="24" :sm="8">
                  <div class="info-item">
                    <div class="info-icon red">
                      <el-icon><Close /></el-icon>
                    </div>
                    <h4>红色通行码</h4>
                    <p>审核驳回，需要重新填写登记信息</p>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-card>
        </div>
      </el-main>

      <!-- 底部 -->
      <el-footer class="app-footer">
        <div class="footer-content">
          <p>&copy; 2025 企业访客登记系统</p>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import {
  Refresh,
  EditPen,
  ArrowLeft,
  Check,
  Clock,
  Close,
} from "@element-plus/icons-vue";
import type { VisitorInfo } from "~/types/api";

const router = useRouter();

// 模拟数据 - 实际应该从API获取
const status = ref<"approved" | "pending" | "rejected">("pending");
const visitorInfo = ref<Partial<VisitorInfo>>({});

const getCodeClass = (status: string) => {
  switch (status) {
    case "approved":
      return "code-green";
    case "pending":
      return "code-orange";
    case "rejected":
      return "code-red";
    default:
      return "code-gray";
  }
};

const getCodeText = (status: string) => {
  switch (status) {
    case "approved":
      return "通";
    case "pending":
      return "审";
    case "rejected":
      return "拒";
    default:
      return "--";
  }
};

const getCodeLabel = (status: string) => {
  switch (status) {
    case "approved":
      return "通行";
    case "pending":
      return "审核中";
    case "rejected":
      return "已驳回";
    default:
      return "未知";
  }
};

const getStatusTagType = (status: string) => {
  switch (status) {
    case "approved":
      return "success";
    case "pending":
      return "warning";
    case "rejected":
      return "danger";
    default:
      return "info";
  }
};

const getStatusText = (status: string) => {
  switch (status) {
    case "approved":
      return "审核通过";
    case "pending":
      return "待审核";
    case "rejected":
      return "审核驳回";
    default:
      return "未知状态";
  }
};

const getValidityPeriod = () => {
  if (status.value === "approved") {
    const startDate =
      visitorInfo.value.YXQKSSJ || new Date().toISOString().split("T")[0];
    const endDate =
      visitorInfo.value.YXQJSSJ ||
      new Date(Date.now() + 24 * 60 * 60 * 1000).toISOString().split("T")[0];
    return `${startDate} 至 ${endDate}`;
  }
  return "--";
};

const toggleCode = () => {
  // 模拟切换状态，实际应该从API获取
  const statuses: Array<"approved" | "pending" | "rejected"> = [
    "approved",
    "pending",
    "rejected",
  ];
  const currentIndex = statuses.indexOf(status.value);
  const nextIndex = (currentIndex + 1) % statuses.length;
  const nextStatus = statuses[nextIndex];
  if (nextStatus) {
    status.value = nextStatus;
    // 更新模拟数据
    updateMockData(nextStatus);
  }
};

const refreshStatus = async () => {
  ElMessage.info("正在刷新状态...");
  // 这里应该调用API获取最新状态
  await new Promise((resolve) => setTimeout(resolve, 1000));
  ElMessage.success("状态已刷新");
};

const goToRegister = () => {
  router.push("/visitor-register");
};

const goBack = () => {
  router.push("/");
};

const updateMockData = (newStatus: "approved" | "pending" | "rejected") => {
  const mockData: Record<string, Partial<VisitorInfo>> = {
    approved: {
      XM: "张三",
      LFRGSMC: "某某建筑公司",
      LXDH: "13800138000",
      RS: "3",
      JCSY: "电气设备安装",
      YXQKSSJ: "2025-10-14",
      YXQJSSJ: "2025-10-20",
      RYLXMC: "施工人员",
    },
    pending: {
      XM: "李四",
      LFRGSMC: "某某装修公司",
      LXDH: "13900139000",
      RS: "2",
      JCSY: "室内装修施工",
      SGLX: "装修施工",
      RYLXMC: "施工人员",
    },
    rejected: {
      XM: "王五",
      LFRGSMC: "某某工程公司",
      LXDH: "13700137000",
      RS: "5",
      JCSY: "管道维修",
      BHYY: "施工时间填写错误，请重新填写",
      RYLXMC: "施工人员",
    },
  };

  visitorInfo.value = mockData[newStatus as keyof typeof mockData] || {};
};

onMounted(() => {
  // 初始化模拟数据
  updateMockData(status.value as "approved" | "pending" | "rejected");
});
</script>

<style scoped>
.visitor-status {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.layout-container {
  min-height: 100vh;
}

.app-header {
  background: transparent;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 0;
}

.header-content {
  text-align: center;
}

.header-title {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  font-weight: 300;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.header-subtitle {
  font-size: 1.1rem;
  opacity: 0.9;
  margin: 0;
}

.app-main {
  padding: 2rem 0;
  background: #f5f7fa;
}

.main-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
}

.status-card,
.info-card {
  margin-bottom: 2rem;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #303133;
}

.status-content {
  text-align: center;
}

.code-display {
  margin-bottom: 2rem;
}

.code-circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.code-circle:hover {
  transform: scale(1.05);
}

.code-green {
  background: linear-gradient(135deg, #67c23a, #85ce61);
  color: white;
}

.code-orange {
  background: linear-gradient(135deg, #e6a23c, #ebb563);
  color: white;
}

.code-red {
  background: linear-gradient(135deg, #f56c6c, #f78989);
  color: white;
}

.code-gray {
  background: linear-gradient(135deg, #909399, #a6a9ad);
  color: white;
}

.code-text {
  font-size: 4rem;
  font-weight: bold;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.code-label {
  font-size: 1.2rem;
  font-weight: 500;
}

.status-info {
  margin-bottom: 2rem;
}

.reject-reason {
  color: #f56c6c;
  font-weight: 500;
}

.action-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.action-buttons .el-button {
  min-width: 140px;
}

.info-content {
  padding: 1rem 0;
}

.info-item {
  text-align: center;
  padding: 1rem;
}

.info-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  font-size: 1.5rem;
}

.info-icon.green {
  background: #f0f9ff;
  color: #67c23a;
}

.info-icon.orange {
  background: #fdf6ec;
  color: #e6a23c;
}

.info-icon.red {
  background: #fef0f0;
  color: #f56c6c;
}

.info-item h4 {
  margin: 0 0 0.5rem;
  color: #303133;
  font-size: 1.1rem;
}

.info-item p {
  margin: 0;
  color: #606266;
  font-size: 0.9rem;
  line-height: 1.4;
}

.app-footer {
  background: #303133;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 0;
}

.footer-content {
  text-align: center;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .main-container {
    padding: 0 15px;
  }

  .header-title {
    font-size: 2rem;
  }

  .header-subtitle {
    font-size: 1rem;
  }

  .card-header {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }

  .code-circle {
    width: 150px;
    height: 150px;
  }

  .code-text {
    font-size: 3rem;
  }

  .action-buttons {
    flex-direction: column;
    align-items: center;
  }

  .action-buttons .el-button {
    width: 100%;
    max-width: 200px;
  }

  .info-item {
    margin-bottom: 1rem;
  }
}
</style>
